<%--
  Created by IntelliJ IDEA.
  User: DCQ
  Date: 2025/3/5
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" import="java.util.*"
         isELIgnored="false" %>
<%@ taglib prefix="rapid" uri="http://www.rapid-framework.org.cn/rapid" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<rapid:override name="title">用户信息管理</rapid:override>

<rapid:override name="head_extend">
    <link href="/static/admin_v1/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/admin_v1/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/admin_v1/css/addTable.css" rel="stylesheet"/>
    <!-- 分页查看 -->
    <link rel="stylesheet" type="text/css" href="/static/dataTable/jquery.dataTables.min.css">
    <script type="text/javascript" src="/static/dataTable/jquery.dataTables.min.js"></script>
    <style>
        .container { display: flex; }
        .del{
            background-color: red;
            color: black;
        }
        .sidebar { width: 200px; background: #f5f5f5; padding: 20px; }
        .main-content { flex: 1; padding: 20px; }
        .search{
            background-color: purple;
            color: white;
        }
        .search-form { background: #fff; padding: 20px; margin-bottom: 20px; }
        .search-row { display: flex; gap: 15px; margin-bottom: 10px; }
        .search-item input, .search-item select { padding: 5px; width: 180px; }
        .table-container { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
        .operate-buttons { margin-bottom: 10px; }
        .operate-buttons button { margin-right: 5px; padding: 5px 10px; }

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</rapid:override>

<rapid:override name="content">
    <div class="row" style="height: 100%">
    <div id="modal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close">×</span>
            <h2 id="h0">新增用户</h2>
            <div class="ibox-content">
                <form class="form-horizontal" id="dataForm">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户姓名</label>
                        <div class="col-sm-8">
                            <input type="text" name="departmentName" placeholder="请输入新增用户姓名" class="form-control">

                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户ID</label>
                        <div class="col-sm-8">
                            <input type="text" name="departmentID" placeholder="请输入新增用户ID" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户邮箱地址</label>
                        <div class="col-sm-8">
                            <input type="text" name="FuzeID" placeholder="请输入新增用户邮箱地址" class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">手机号</label>
                        <div class="col-sm-8">
                            <input type="text" name="modifyID" placeholder="请输入新增用户手机号" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户类型</label>
                        <div class="col-sm-8">
                            <select name="userTYpe" class="form-control m-b">
                                <option>应聘者</option>
                                <option>在职者</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户状态</label>
                        <div class="col-sm-8">
                            <select name="userStatus" class="form-control m-b">
                                <option>禁用</option>
                                <option>启用</option>
                            </select>
                        </div>
                    </div>



                    <div class="form-group">
                        <label class="col-sm-3 control-label">新增时间</label>
                        <div class="col-sm-8">
                            <input id="hello" class="laydate-icon form-control layer-date">
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-8">
                            <button class="btn btn-sm btn-info" type="submit">新增</button>
                        </div>
                    </div>
                    <button type="button" class="close">取消</button>
                </form>
            </div>
        </div>
    </div>
    <!-- 主内容区域 -->
    <div class="main-content">
        <h2>用户管理</h2>

        <!-- 查询表单 -->
        <div class="search-form">
            <form id="searchForm">
                <div class="search-row">
                    <div class="search-item">
                        用户账号：<input type="text" name="username">
                    </div>
                    <div class="search-item">
                        手机号码：<input type="text" name="phone">
                    </div>
                </div>
                <div class="search-row">
                    <div class="search-item">
                        用户名称：<input type="text" name="nickname">
                    </div>
                    <div class="search-item">
                        所属部门：<input type="text" name="dept">
                    </div>
                </div>
                <div class="search-row">
                    <div class="search-item">
                        用户状态：
                        <select name="status">
                            <option value="">请选择...</option>
                            <option value="1">启用</option>
                            <option value="0">禁用</option>
                        </select>
                    </div>
                    <div class="search-item">
                        创建时间：<input type="date" name="startTime"> 至 <input type="date" name="endTime">
                    </div>
                </div>
                <div class="search-row">
                    <button type="button" onclick="search()" class="search">搜索</button>
                    <button type="reset">重置</button>
                </div>
            </form>
        </div>

        <!-- 操作按钮（权限控制） -->
        <div class="operate-buttons">

                <button id="addButton" onclick="addUser()" class="search">添加</button>
                <button class="search"><a href="javascript:void(0);" onclick="modify('${user.userId}')">修改</a></button>
                <button onclick="deleteUser()" class="del">删除</button>

            <button onclick="exportData()" class="search">导出</button>
        </div>

        <!-- 用户数据表格 -->
        <div class="table-container">
            <table id="example" class="table table-striped">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox"> 选择
                    </th>
                    <th>用户ID</th>
                    <th>用户姓名</th>
                    <th>邮箱地址</th>
                    <th>用户类型</th>
                    <th>用户状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${userList}" var="user">
                    <tr>
                        <td>
                            <input type="checkbox" name="choose" value="${user.id}">
                        </td>
                        <td>${user.userId}</td>
                        <td>${user.userName}</td>
                        <td>${user.email}</td>
                        <td>${user.userType}</td>
                        <td>
                            <c:choose>
                                <c:when test="${user.isActive=='normal'}">
                                    启用
                                </c:when>
                                <c:when test="${user.isActive=='exception'}">
                                    异常
                                </c:when>
                                <c:otherwise>
                                    禁用
                                </c:otherwise>
                            </c:choose>

                        </td>
                        <td>${user.createTime}</td>
                        <td>
                            <a href="#" >编辑</a>
                            <a href="/admin/user/delete/${user.userId}" >删除</a>
                            <a href="/admin/user/find/${user.userId}" >详情</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>


</rapid:override>

<rapid:override name="js_extend">
    <!-- Flot -->
    <script src="/static/css/plugins/flot/jquery.flot.js"></script>
    <script src="/static/css/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="/static/css/plugins/flot/jquery.flot.resize.js"></script>
    <script src="/static/css/plugins/flot/jquery.flot.pie.js"></script>
    <!-- 自定义js -->
    <script src="/static/css/content.js"></script>
    <!--flotdemo-->

    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").dataTable({
                "bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
                "aLengthMenu": [5, 10, 15], //更改显示记录数选项
                "sPaginationType": "full_numbers", //详细分页组，可以支持直接跳转到某页
                "bAutoWidth": true, //是否自适应宽度
                //"bJQueryUI" : true,
                "oLanguage": { //国际化配置
                    "sProcessing": "正在获取数据，请稍后...",
                    "sLengthMenu": "显示 _MENU_ 条",
                    "sZeroRecords": "没有您要搜索的内容",
                    "sInfo": "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
                    "sInfoEmpty": "记录数为0",
                    "sInfoFiltered": "(全部记录数 _MAX_ 条)",
                    "sInfoPostFix": "",
                    "sSearch": "搜索",
                    "sUrl": "",
                    "oPaginate": {
                        "sFirst": "第一页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "最后一页"
                    }
                },
            });
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const newButton = document.getElementById('addButton');
            const modal = document.getElementById('modal');
            const closeButtons = document.querySelectorAll('.close');
            const dataForm = document.getElementById('dataForm');

            // 打开模态窗口
            newButton.onclick = function() {
                modal.style.display = 'block';
            }

            // 关闭模态窗口
            closeButtons.forEach(button => {
                button.onclick = function() {
                    modal.style.display = 'none';
                }
            });

            // 提交表单 修改数据
            dataForm.onsubmit = function(event) {
                event.preventDefault(); // 防止页面刷新
                const name = document.getElementById('name').value;
                const age = document.getElementById('age').value;
                console.log(`姓名: , 年龄: `); // 处理数据，如发送到服务器等
                modal.style.display = 'none'; // 关闭窗口
                dataForm.reset(); // 重置表单
            }

            // 点击窗口外的区域也关闭窗口
            window.onclick = function(event) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            }
        });
    </script>
    <script>
        function deleteUser(id){
            if (confirm("确定删除该用户吗")){

            }
        }
    </script>

    <%--跳转详情页面的js函数--%>
    <script>
        function viewDetail(userId) {
            window.location.href = 'userDetail.jsp?userId=' + userId;
        }
    </script>

    <%--跳转修改界面的js函数--%>
    <script>
        function modify(userId){
            window.location.href ='userModify.jsp?userId'+userId;
        }
    </script>
</rapid:override>

<%@include file="/jsp/common/admin/base.jsp" %>


